bodi {
    width: 80%;
    margin: 0 auto;
}

h1 {
    text-align: center;
}

footer {
    text-align: center;
    font-size: 12px;
}

footer span {
    margin-right: 2em;
}

#flexbox {
    display: flex;
    background-color: #eee;
    flex-direction: row;
    flex-wrap: wrap; 
    /* flex-flow: row wrap; */
    justify-content: space-around;
    align-items: baseline;
    padding: 1em;
}

/* 0101 */
#flexbox p {
    border: 1px red solid;
    order: 1;
}

#flexbox p:first-child {
    width: 3rem;
    height: 3rem;
    background-color: #fff;
    overflow: hidden;
}

/* 0110 */
#flexbox .fz-5 {
    font-size: 1.5rem;
    order: 0;
    flex-basis: 300px;
}

#column {
    column-count: 3;
    /* column-width: 300px; */
    column-gap: 100px;
    column-rule: borser 3rem;
    column-span: all;
}

.break-avoid {
    break-inside: avoid;
}

#grid {
    display: grid;
    grid-template-columns: 3fr 3fr;
    grid-gap:20px;
    grid-template-areas: 
        "header header"
        "content sidebar"
        "footer footer";
}

header {
    grid-area: header;
}

article {
    grid-area: content;
}

aside {
    grid-area: sidebar;
}